<template>
	<div>
	  <div class="header">
		<h3>处理异常答题卡</h3>
		<div class="routerlistbox">
			<router-link :to="`/homeabnormalexamnumber?subjectid=${$route.query.subjectid}&examid=${$route.query.examid}&examtitle=${$route.query.examtitle}&sujectname=${$route.query.sujectname}`" active-class="hover">答题卡异常</router-link>
		    <router-link :to="`/homeoptionexception?subjectid=${$route.query.subjectid}&examid=${$route.query.examid}&examtitle=${$route.query.examtitle}&sujectname=${$route.query.sujectname}`" active-class="hover">填涂异常</router-link>
			<router-link :to="`/homeabnormalrating?subjectid=${$route.query.subjectid}&examid=${$route.query.examid}&examtitle=${$route.query.examtitle}&sujectname=${$route.query.sujectname}`" active-class="hover">打分异常</router-link>
		</div>
		<p>
		  <b @click="toggleFullscreen"><img src="../../assets/image/school/qp.png" alt="">{{ isFullscreen ? "退出全屏" : "全屏(F11)" }}</b>
		  <em @click="quiteboxclick">退出</em>
		</p>
	  </div>
	  <div class="cropperBox">
		<div class="cropperImageset" ref="scrollContainer">
			<div class="cardczpk">
				   <span>答题卡操作</span>
				   <div>
					   <i @click="roateclick">旋转</i>
					   <b @click="cardabsore=true">排序</b>
				   </div>
			</div>
		  <div v-loading="loading"
			  element-loading-text="图片加载中..."
			  element-loading-spinner="el-icon-loading"
			  element-loading-background="rgba(0, 0, 0, 0.8)">
			<canvas ref="canvas"></canvas>
		  </div>
		  <ul class="pagesetfixed">
			  <li v-for="(item,index) in imageUrllist"  :class="index==tabindex?'hover':''" @click="pageimageclick(index)">{{index+1}}</li>
		  </ul>
		</div>
		<div class="uploadcardInfo" ref="unloadishowscorrel">
		  <h3>异常列表({{numbersl.optionExceptionCount}})</h3>
		  <div class="yclbtitle">
			  <div class="yclbtitleLeft">
				<el-select v-model="batchNo" placeholder="批次号">
						<el-option
						v-for="item in batchNoList"
						:key="item.value"
						:label="item.label"
						:value="item.value">
						</el-option>
					</el-select>
					<el-input clearable placeholder="流水号" v-model="serialNo"></el-input>
				  <el-input clearable placeholder="准考证号" v-model="examNumber"></el-input>
				  <el-input clearable placeholder="考生姓名" v-model="studentName"></el-input>
				  <el-button @click="searchboxinfo">搜索</el-button>
			  </div>
			  <div class="yclbtitleRight">
				  <el-button @click="translatedata">刷新</el-button>
				  <el-button @click="dacdeletmore">批量删除</el-button>
				  <el-button @click="mandatoryidentification">强制识别</el-button>
				  <el-button @click="batchrecognition">批量识别</el-button>
			  </div>
		  </div>
		  <!-- 表格 -->
		  <!-- <div style="padding:0 14px;position: relative;" ref="scrollContainercontent"> -->
		  <el-table
			   ref="multipleTable"
			   :data="questionlist"
			   :style="{width: (questionlist.length > 0 ? (questionlist[0].objectiveAnswers.length * 106*5) + 'px' : '100%') }"
			   :height="tableheightbox"
				class="custom-table"
				  @row-click="handleRowClick"
				  @selection-change="handleSelectionChange"
				  
			 >
			   <el-table-column type="selection" width="55" />
			   <el-table-column prop="batchNumber" label="批次号" width="80" />
			   <el-table-column prop="serialNumber" label="流水号" width="80" />
			   <el-table-column prop="examNumber" label="考号" width="120" />
			   <el-table-column prop="examName" label="姓名" width="100" />
			   <el-table-column
				 v-for="(chil, colIndex) in questionlist.length > 0 ? questionlist[0].objectiveAnswers : []"
				 :key="colIndex"
				 :label="`${chil.questionRuleName}${chil.questionNumber}`"
			   >
				 <template #default="{ row, $index }">
					 <div style="position:relative">
						  <!-- :data-questionId="" -->
						 <b
						   :ref="`question-${$index}-${colIndex}`"
						   @click="handleCellClick(row.objectiveAnswers[colIndex], $event, colIndex, $index, row.paperImages)"
						   style="position:relative">
											  <i :class="!row.objectiveAnswers[colIndex].isCheck ? 'boxihover' : ''" style="position:absolute;left:0;top:0;display: block;width:100%;
						 height:97%;z-index:111;"></i>
							  <el-input v-if="!row.objectiveAnswers[colIndex].isCheck" v-model="row.objectiveAnswers[colIndex].option"></el-input>
						   {{ row.objectiveAnswers[colIndex].option }}
						 </b>
						 <!-- 弹窗 -->
						 <div class="answerbox" :style="{left:addanswerLeft+'px',top:addanswerTop+'px'}" v-show="row.objectiveAnswers[colIndex].answerIsShow">
							  <em class="el-icon-close" style="position:absolute;right:8px;top:10px;font-style:normal;cursor: pointer;" @click="closermessage"></em>
							  <h4 style="padding-top:15px;">请选择答题卡中的选项</h4>
							  <p>
								<i
								  v-for="item in getAnswerList(row.objectiveAnswers[colIndex])"
								  :key="item"
								  @click="selectAnswer(item)"
								>
								  {{ item }}
								</i>
							  </p>
							  <div>
								<!-- <span @click="prevAnswer">上一个</span>
								 <span @click="nextAnswer">下一个</span> -->
								  <span @click="submitsigle">提交</span>
								 <b @click="submitAll">整条提交</b>
							  </div>
						 </div>
					 </div>
				 </template>
			   </el-table-column>
		  </el-table>
		  <!-- </div> -->
		</div>
	  </div>
	  <!-- 排序 -->
	  <div class="uploadcadContent" v-if="cardabsore">
		  <div class="uploadcad">
			  <h3>答题卡操作-排序</h3>
			  <draggable v-if="imageUrllist.length>0" :list="imageUrllist" :animation="100" :forceFallback="true"  @end="onEnd" @change="onMoveCallback" class="imgmove">
				   <transition-group>
					 <div v-for="(item, index) in imageUrllist" :key="item.id" class="boxsetdelecte" v-if="imageUrllist.length > 0">
						  <b>{{index+1}}</b>
					   <img :src="item.filePath" alt="" style="width:200px;border: 1px solid #295cff80;">
					   <span><img src="../../assets/image/school/drag.png" alt="" style="width:24px;height:24px;"></span>
					   <div class="buttonboxedit">
						   <i @click="showViewer(index)">查看</i>
					   </div>
					 </div>
				   </transition-group>
				 </draggable>
				 <div class="buttonreupload" style="margin-top:20px;">
					 <button @click="surepxlist">保存</button>
					 <b @click="cardabsore=false">返回</b>
				 </div>
		  </div>
	  </div>
	  <viewer
	   class="viewer"
	   ref="viewer"
	   :images="imageUrllist"
	   :shown="viewerVisible"
	   @inited="viewerInited"
	  >
	   <template #default="{ images }">
		 <img
		   v-for="(image, index) in images"
		   :key="index"
		   :src="image.filePath"
		   style="display: none;"
		 >
	   </template>
	  </viewer>
	  <!-- 批量识别答题卡 -->
	  <div class="addExamMain" v-if="batchrecognitionishow">
		  <div class="addExamContent">
			  <h3>批量识别答题卡</h3>
			  <p>批量识别将覆盖现有识别记录，请选择以下重新批量识别选项</p>
			  <div class="sbcontentbsl">
				  <el-checkbox v-model="isExamNo">准考证号</el-checkbox>
				  <el-checkbox v-model="isMissExam">缺考标记</el-checkbox>
				  <el-checkbox v-model="isOption">客观题</el-checkbox>
			  </div>
			  <div class="sbjdprogreen">
				  识别进度
				  <el-progress :percentage="50"></el-progress>
			  </div>
			  <div class="groupbutton">
				  <el-button type="primary" @click="batchsurebc">开始识别</el-button>
				  <el-button type="primary" @click="batchgoback">取消</el-button>
			  </div>
		  </div>
	  </div>
	  <!-- 强制识别答题卡 -->
	  <div class="addExamMain" v-if="mandatoryidentificationishow">
		  <div class="addExamContent">
			  <h3>强制识别答题卡</h3>
			  <p>强制识别后智能批改数据将被强制清空！</p>
			  <div class="sbcontentbsl">
				  强制识别数量  <span>{{this.multipleSelection.length}}</span>
			  </div>
			  <div class="sbjdprogreen">
				  识别进度
				  <el-progress :percentage="(this.totalNumber / this.multipleSelection.length) * 100"></el-progress>
			  </div>
			  <div class="groupbutton">
				  <el-button type="primary" @click="mandatorysure">强制识别</el-button>
				  <el-button type="primary" @click="Mandatorygoback">取消</el-button>
			  </div>
		  </div>
	  </div>
	</div>
  </template>
  
  <script>
	  import {get,post,del,dele} from '../../request/api.js'
	  import draggable from 'vuedraggable';
  export default {
	data() {
	  return {
		canvas: null,
		ctx: null,
		isDrawing: false,
		isResizing: false,
		startX: 0,
		startY: 0,
		currentX: 0,
		currentY: 0,
		selectedAreas: [],
		image: null,
		activeAreaIndex: null,
		resizeHandleIndex: null,
		overHandleIndex: null,
		handleSize: 8,
		questionlist:[],
		answerlist: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'],
		examNumber:'',
		studentName:'',
		 answerishow: false,
		  currentAutoIndex:0,
		  autoLocatedCells: [], // 存储所有符合条件的单元格信息
		  scrollContainercontent: null, // 表格滚动容器引用
		  addanswerLeft:0,
		  addanswerTop:0,
		  answerishow:false,
		  rowindex:'',
		  colindex:'',
		  selected: [], // 存储已选中的答案
		  imageUrllist:[{name:'1'},{name:'2'}],
		  tabindex:0,
		  currentIndex:1,
		  isButtonClicked:false,
		  viewerVisible: false, // 控制查看器的显示状态
		  viewerIndex: 0, // 当前查看的图片索引
		  restartupload:false,
		  cardabsore:false,
		  multipleSelection:[],
		  tableBodyWrapper:null,
		  currentPosition: { sIndex: -1, qIndex: -1 } ,// 当前高亮位置
		  numbersl:{},
		  batchrecognitionishow:false,
		  mandatoryidentificationishow:false,
		  isExamNo:true,
		  isMissExam:false,
		  isOption:false,
		  rowpaperId:0,
		  timer:null,
		  timer1:null,
		  timer2:null,
		  timer3:null,
		  loadingishow:null,
		  loading:false,
		  isFullscreen:null,
		  batchNo:'', // 批次号
		  serialNo:'',//流水号
		  batchNoList:[]
	  };
	},
	mounted() {
		// 监听全屏状态变化
		document.onfullscreenchange = this.handleFullscreenChange;
	  this.examobjcontent = JSON.parse(sessionStorage.getItem('examInfo'))
	  this.tableheightbox = window.innerHeight - 185
	  //console.info(this.tableheightbox)
	  this.selectycbox()
	  this.getdatanum()
	  this.batchlistclick()
	},
	methods: {
		// 批次下拉
	batchlistclick(){
		let obj={
			examCourseId:this.$route.query.subjectid
		}
	    post('/scanpaperexception/batchlist',obj).then(res => {
	        if(res.code == 200){
				this.batchNoList = res.data
			}else{
				this.$message.error(res.message)
			}
	    })
	},
		quiteboxclick(){
			this.$router.push(`/studentscore?subjectid=${this.$route.query.subjectid}&examid=${this.$route.query.examid}&examtitle=${this.$route.query.examtitle}&sujectname=${this.$route.query.sujectname}`)
		},
		// 切换全屏
		toggleFullscreen() {
		  if (!document.fullscreenEnabled) {
		    alert("您的浏览器不支持全屏功能！");
		    return;
		  }
		
		  if (this.isFullscreen) {
		    // 退出全屏
		    document.exitFullscreen();
			this.$refs.fullscreenElement.style.overflow = 'auto';
		  } else {
		    // 进入全屏
		    this.$refs.fullscreenElement.requestFullscreen();
			this.$refs.fullscreenElement.style.overflow = 'auto';
		  }
		},
		// 处理全屏状态变化
		handleFullscreenChange() {
		  this.isFullscreen = !!document.fullscreenElement;
		},
		//刷新
		translatedata(){
			this.selectycbox()
			this.getdatanum()
			this.selectedAreas=[]
			this.tabindex = 0
		},
	   //强制识别
	   mandatoryidentification(){
				 this.mandatoryidentificationishow = true
	   },
	   mandatorysure(){
				if (this.multipleSelection.length > 0) {
				  let ids = this.multipleSelection.map(item => item.id);
					  
				  // 强制识别提示
				 this.$message({
				   message: '正在进行批量识别操作，请稍候...',
				   type: 'warning',
				   offset:60
				 });
					  
				  // 循环调用接口
				  ids.forEach((id, index) => {
					let obj = {
					  paperId:id, // 每次只传一个 id
					};
					  
					get('/scanpaperexception/forceidentify', obj)
					  .then(res => {
						if (res.code == 200) {
						  // 处理成功逻辑
						  this.$message({
							type: 'success',
							message: `批量识别成功！（${index + 1}/${ids.length}）`,
						   offset:60
						  });
							this.totalNumber = index + 1
						  // 如果所有 ID 都处理完成，调用 yclistbox 方法
						  if (index === ids.length - 1) {
							this.timer = setTimeout(()=>{
								 this.yclistbox();
							},500)
							this.$message({
							  type: 'success',
							  message: '所有批量识别操作已完成！',
							 offset:60
							});
							this.batchrecognitionishow = false;
						  }
						} else {
						  // 处理失败逻辑
						 this.$message({
							   message: res.message || `批量识别失败，请检查数据后重试！（${index + 1}/${ids.length}）`,
							   type: 'error',
							   offset:60
						 });
						}
					  })
					  .catch(error => {
						// 处理异常
					   this.$message({
						   message:`批量识别过程中发生错误：${error.message}（${index + 1}/${ids.length}）`,
						   type: 'error',
						   offset:60
					   });
					  });
				  });
				} else {
				  this.$message({
					type: 'warning',
					message: '没有选中内容，无法进行批量识别操作！',
				   offset:60
				  });
				}
	   },
	   Mandatorygoback(){
			   this.mandatoryidentificationishow = false  
	   },
	   // 批量识别
	   batchrecognition(){
		   this.batchrecognitionishow = true
	   },
	   batchsurebc() {
		 if (this.multipleSelection.length > 0) {
		   let ids = this.multipleSelection.map(item => item.id);
	   
		   // 强制识别提示
		   this.$message({
			 type: 'warning',
			 message: '正在进行批量识别操作，请稍候...',
			   offset:60
		   });
	   
		   // 循环调用接口
		   ids.forEach((id, index) => {
			 let obj = {
			   paperId:id, // 每次只传一个 id
			   isExamNo: this.isExamNo,
			   isMissExam: this.isMissExam,
			   isOption: this.isOption
			 };
	   
			 post('/scanpaperexception/batchidentify', obj)
			   .then(res => {
				 if (res.code == 200) {
				   // 处理成功逻辑
				   this.$message({
					 type: 'success',
					 message: `批量识别成功！（${index + 1}/${ids.length}）`,
					 offset:60
				   });
						   this.totalNumber = index + 1
				   // 如果所有 ID 都处理完成，调用 yclistbox 方法
				   if (index === ids.length - 1) {
					this.timer1 = setTimeout(()=>{
						 this.yclistbox();
					},500)
					 this.$message({
					   type: 'success',
					   message: '所有批量识别操作已完成！',
					   offset:60
					 });
					 this.batchrecognitionishow = false;
				   }
				 } else {
				   // 处理失败逻辑
				   this.$message({
					 type: 'error',
					 message: res.message || `批量识别失败，请检查数据后重试！（${index + 1}/${ids.length}）`,
					   offset:60
				   });
				 }
			   })
			   .catch(error => {
				 // 处理异常
				 this.$message({
				   type: 'error',
				   message: `批量识别过程中发生错误：${error.message}（${index + 1}/${ids.length}）`,
					 offset:60
				 });
			   });
		   });
		 } else {
		   this.$message({
			 type: 'warning',
			 message: '没有选中内容，无法进行批量识别操作！',
			 offset:60
		   });
		 }
	   },
	   batchgoback(){
		   this.batchrecognitionishow = false
	   },
		getdatanum(){
		  let obj={
			  examCourseId:this.$route.query.subjectid,
		  }
		  get('/scanpaperexception/exception',obj)
		  .then(res=>{
			  //console.info(res)
			  if(res.code==200){
				  this.numbersl = res.data
			  }else{
				  this.$message.error(res.message);
				  this.$message({
					type: 'error',
					message: res.message,
					offset:60
				  });
			  }
		  })
		},
		handleScroll() {
		  const scrollLeft = this.tableBodyWrapper.scrollLeft; // 获取横向滚动的像素值
		  //console.log('横向滚动像素值：', scrollLeft);
		},
		showViewer(index) {
		  // 显示查看器并跳转到指定图片
		  this.$viewer.view(index);
		},
		viewerInited(viewer) {
		  // 在 viewer 初始化后，可以通过 this.$viewer 访问 viewer 实例
		  this.$viewer = viewer;
		},
		//获取答题卡选项异常
		selectycbox() {
			  let obj = {
				examCourseId: this.$route.query.subjectid,
				examNo: this.examNumber,
				studentName: this.studentName,
			  };
			  get('/scanpaperexception/optionexception', obj)
				.then((res) => {
				  if (res.code === 200) {
					// 检查数据是否存在
					if (res.data && res.data.length > 0) {
					  res.data.forEach((item) => {
						item.objectiveAnswers.forEach((answer) => {
						  if (!answer.isCheck) {
							answer.answerIsShow = false; // 添加新属性
						  }
						});
					  });
					  this.questionlist = res.data;
					  this.imageUrllist = res.data[0].paperImages;
					  // this.multipleSelection = [this.questionlist[0]];
					  //  this.$nextTick(() => {
					  // 	 this.$refs.multipleTable.toggleRowSelection(this.questionlist[0], true);
					  //  });
					  this.timer2 = setTimeout(() => {
						this.loadImage(res.data[0].paperImages[0].filePath);
					  }, 1000);
					} else {
					  this.questionlist = []; // 如果数据为空，设置为空数组
					  this.imageUrllist = [];
					  this.$message({
						type: 'warning',
						message: '当前没有可处理的异常',
						offset:60
					  });
					  this.timer3 = setTimeout(()=>{
						  this.$router.push('/identificationrecord')
					  },4000)
					}
				  } else {
					this.$message.error(res.message);
				  }
				})
				.catch((error) => {
				  this.$message({
					type: 'error',
					message: '请求失败，请检查网络连接',
					offset:60
				  });
				});
			},
		// 加载图片
		loadImage(url) {
			this.loading = true
			this.canvas = this.$refs.canvas;
				this.ctx = this.canvas.getContext('2d'); 
				
		   this.image = new Image();
		   this.image.src = url; // 设置图片路径
		   this.image.onload = () => {
			  this.loading = false
			 // 设置 Canvas 宽高为图片的宽高
			 this.canvas.width = this.image.width;
			 this.canvas.height = this.image.height;
		 
			 // 在 Canvas 上绘制图片
			 this.ctx.drawImage(this.image, 0, 0, this.image.width, this.image.height);
			 this.draw()
		   };
		   this.image.onerror = () => {
			   this.loading = false
			 console.error('Failed to load image:', url);
		   this.$message({
			 type: 'error',
			 message: '无法加载图片，请检查图片 URL 是否正确或网络连接是否正常。',
			 offset:60
		   });
		   };
		},
		// 根据单元格坐标和滚动偏移量显示弹窗
		showAnswerBox({ coordinate, rowIndex, colIndex }) {
		  this.$nextTick(() => {
			// 获取表格滚动容器
			const scrollContainer = this.$refs.scrollContainercontent;
			if (!scrollContainer) return;
			// 定义一个函数来更新弹窗位置
			const updateAnswerBoxPosition = () => {
			  this.addanswerLeft = ((colIndex + 1) * 80 + 60) + scrollContainer.scrollLeft;
			  this.addanswerTop = ((rowIndex + 1) * 40 + 46) + scrollContainer.scrollTop;
			};
			// 初始设置弹窗位置
			updateAnswerBoxPosition();
			// 监听滚动事件，动态更新弹窗位置
			scrollContainer.addEventListener('scroll', updateAnswerBoxPosition);
			// 滚动表格到目标单元格
			this.scrollToCell(rowIndex, colIndex);
		  });
		},
		getAnswerList(row) {
			  const optionCount = row.optionCount;
			  const questionRuleName = row.questionRuleName;
		
			  if (optionCount === 2 && questionRuleName === '判断题') {
				return ['T', 'F']; // 判断题
			  } else if (optionCount === 3) {
				return ['A', 'B', 'C']; // 3 个选项
			  } else if (optionCount === 4) {
				return ['A', 'B', 'C', 'D']; // 4 个选项
			  } else if (optionCount === 5) {
				return ['A', 'B', 'C', 'D', 'E']; // 5 个选项
			  } else if (optionCount === 6) {
				return ['A', 'B', 'C', 'D', 'E', 'F']; // 6 个选项
			  } else if (optionCount === 7) {
				return ['A', 'B', 'C', 'D', 'E', 'F', 'G']; // 7 个选项
			  } else if (optionCount === 8) {
				return ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H']; // 8 个选项
			  } else {
				return []; // 默认返回空数组
			  }
			},
			handleCellClick(row, event, colindex, rowindex, imglist) {
    //console.info('imglist', event);
    this.selected = [];
    this.rowindex = rowindex;
    this.colindex = colindex;

    // 重置所有 answer.answerIsShow 为 false
    this.questionlist.forEach((question) => {
        question.objectiveAnswers.forEach((answer) => {
            answer.answerIsShow = false;
        });
    });

    // 设置当前点击的 answer.answerIsShow 为 true
    const currentAnswer = this.questionlist[rowindex].objectiveAnswers[colindex];
    currentAnswer.answerIsShow = true;

    // 确保弹窗已渲染
    this.$nextTick(() => {
        const answerBox = document.querySelector('.answerbox');
        const images = answerBox.querySelectorAll('img');

        // 等待所有图片加载完成
        Promise.all(Array.from(images).map(img => {
            if (img.complete) return Promise.resolve();
            return new Promise((resolve) => {
                img.onload = resolve;
                img.onerror = resolve; // 防止图片加载失败导致卡住
            });
        })).then(() => {
            // 图片加载完成后获取弹窗尺寸
            const popupRect = answerBox.getBoundingClientRect();
            const popupWidth = popupRect.width;
            const popupHeight = popupRect.height;

            // 获取视口尺寸
            const viewportWidth = document.documentElement.clientWidth;
            const viewportHeight = document.documentElement.clientHeight;
            const margin = 20; // 安全边距

            // 考虑页面滚动偏移
            const scrollX = window.scrollX || window.pageXOffset;
            const scrollY = window.scrollY || window.pageYOffset;

            // 计算初始位置
            let left = event.clientX + scrollX - popupWidth / 2;
            let top = event.clientY + scrollY + 20;

            // 水平边界检测
            if (left + popupWidth > viewportWidth - margin) {
                left = viewportWidth - popupWidth - margin;
            } else if (left < margin) {
                left = margin;
            }

            // 垂直边界检测
            if (top + popupHeight > viewportHeight - margin) {
                top = viewportHeight - popupHeight - margin;
            } else if (top < margin) {
                top = margin;
            }

            // 设置最终位置
            this.addanswerLeft = left;
            this.addanswerTop = top;

            // 打印调试信息
            //console.log('弹窗尺寸:', popupWidth, popupHeight);
            //console.log('初始位置:', left, top);
            //console.log('视口尺寸:', viewportWidth, viewportHeight);

            this.imageUrllist = imglist;
            this.selectedAreas = [{ width: row.w, height: row.h, x: row.x, y: row.y }];
            //console.info('row.page', row.page);
            this.tabindex = row.page - 1;
            this.loadImage(imglist[row.page - 1].filePath);
        });
    });
},
	prevAnswer() {
		if (this.currentAutoIndex <= 0) return;
		this.currentAutoIndex--;
		this.showAnswerBox(this.autoLocatedCells[this.currentAutoIndex]);
	  },
	
	  nextAnswer() {
		if (this.currentAutoIndex >= this.autoLocatedCells.length - 1) return;
		this.currentAutoIndex++;
		this.showAnswerBox(this.autoLocatedCells[this.currentAutoIndex]);
	  },
	  selectAnswer(answer){
		  //console.info(this.rowindex+'---'+this.colindex)
		  // 判断是否已选中
		  const index = this.selected.findIndex(item => item === answer);
		  if (index > -1) {
			  // 已选中，移除
			  this.selected.splice(index, 1);
		  } else {
			  // 未选中，添加
			  this.selected.push(answer);
		  }
		  //console.info(this.selected)
		  this.questionlist[this.rowindex].objectiveAnswers[this.colindex].option = this.selected.join('')
	  },
	  // 单个提交
	  submitsigle(){
		  // //console.info('this.selected',this.questionlist[this.rowindex])
		  // return false
		  let obj={
			  paperId:this.questionlist[this.rowindex].id,
			  paperQuestionId:this.questionlist[this.rowindex].objectiveAnswers[this.colindex].questionId,
			  option:this.selected.length!=0?this.selected.join(''):this.questionlist[this.rowindex].objectiveAnswers[this.colindex].option
		  }
		  post('/scanpaperexception/submit',obj)
		  .then(res=>{
			  if(res.code==200){
				  this.selected = []
				  this.questionlist[this.rowindex].objectiveAnswers[this.colindex].answerIsShow = false
				  this.questionlist[this.rowindex].objectiveAnswers[this.colindex].isCheck = res.data
				  this.selectedAreas=[]
				  this.selectycbox()
				  this.getdatanum()
			  }else{
				  this.$message({
					type: 'error',
					message: res.message,
					offset:60
				  });
			  }
			  
		  })
	  },
	  //整条提交
	  submitAll(){
		  let obj={
			  paperId:this.questionlist[this.rowindex].id,
			  paperQuestionId:this.questionlist[this.rowindex].id,
			  option:this.selected.length!=0?this.selected.join(''):this.questionlist[this.rowindex].objectiveAnswers[this.colindex].option
		  }
		  post('/scanpaperexception/allsubmit',obj)
		  .then(res=>{
			  // consoel.info(res)
			  this.selected = []
			  this.questionlist[this.rowindex].objectiveAnswers = this.questionlist[this.rowindex].objectiveAnswers.map(item => ({
			  ...item,
			  isCheck: false,
			  answerIsShow: false
			  }));
			   this.selectedAreas=[]
			  this.selectycbox()
			  this.getdatanum()
		  })
	  },
	  //关闭弹窗
	  closermessage(){
		  this.questionlist[this.rowindex].objectiveAnswers[this.colindex].answerIsShow = false
	  },
	  handleSelectionChange(val) {
		this.multipleSelection = val;
		if(!val){
			this.rowpaperId = val[0].id 
		}
	  },
	  draw() {
		this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
		this.ctx.drawImage(this.image, 0, 0, this.image.width, this.image.height);
		this.selectedAreas.forEach((area, index) => {
		  if (this.$refs.scrollContainer) {
			this.$refs.scrollContainer.scrollLeft = area.x - 220;
			this.$refs.scrollContainer.scrollTop = area.y - 200;
		  }
		  this.ctx.strokeStyle = index === this.activeAreaIndex ? 'red' : 'red';
		  this.ctx.lineWidth = 2;
		  this.ctx.fillStyle = 'rgba(0, 0, 0, 0)';
		  this.ctx.fillRect(area.x, area.y, area.width, area.height);
		  this.ctx.strokeRect(area.x, area.y, area.width, area.height);
		});
		if (this.isDrawing) {
		  this.ctx.strokeStyle = 'red';
		  this.ctx.lineWidth = 2;
		  this.ctx.fillRect(this.startX, this.startY, this.currentX - this.startX, this.currentY - this.startY);
		  this.ctx.strokeRect(this.startX, this.startY, this.currentX - this.startX, this.currentY - this.startY);
		}
	  },
	  handleRowClick(row,column,enent){
		  this.rowpaperId = row.id
		  this.imageUrllist = row.paperImages
		  // this.loadImage(row.paperImages[0].filePath)
		  
		  // 获取当前选中的行数据
		  // const table = this.$refs.multipleTable;
		  // const isSelected = table.selection.some(item => item.id === row.id);
		  // this.$nextTick(() => {
		  //   this.$refs.multipleTable.toggleRowSelection(row, !isSelected);
		  // });
	  },
	  pageimageclick(num){
		  this.tabindex = num
		  this.currentImage = this.imageUrllist[num]
		  this.loadImage(this.imageUrllist[num].filePath)
	  },
	  //保存排序
	  surepxlist(){
		  const result = this.imageUrllist.map((item, index) => {
			  return {
				id: item.id,
				page: index + 1
			  };
		  });
		  let obj={
			  paperId:this.rowpaperId,
			  paperImages:result
		  }
		  post('/scanpaperexception/papersort',obj)
		  .then(res=>{
			  //console.info(res)
			  if(res.code==200){
				  this.yclistbox()
				  this.cardabsore()
			  }else{
				  this.$message({
					type: 'error',
					message: res.message,
					offset:60
				  });
			  }
		  })
	  },
	  // 旋转
	  roateclick(){
		  this.loadingishow = this.$loading({
			lock: true,
			text: '旋转中...',
			spinner: 'el-icon-loading',
			background: 'rgba(0, 0, 0, 0.7)'
		  });
		  let obj={
			  paperId:this.rowpaperId,
			  angleInDegrees:90
		  }
		  get('/scanpaperexception/rotate',obj)
		  .then(res=>{
			  //console.info(res)
			  if(res.code==200){
				  this.loadingishow.close();
				  // 移除旧的时间戳
				  const filePath = this.imageUrllist[this.tabindex].filePath.replace(/\?timesDate=\d+/, '');
				  // 添加新的时间戳
				  this.imageUrllist[this.tabindex].filePath = `${filePath}?timesDate=${new Date().getTime()}`;
				  this.loadImage(this.imageUrllist[this.tabindex].filePath)
				  this.selectycbox()
				  this.getdatanum()
				  // 定义异常信息映射
				  const errorMessages = {
					4000: "单选多个答案",
					4100: "缺少选项"
					// 可以根据需要继续扩展
				  };
				  
				  // 定义状态码映射
				  const statusCodes = {
					success: "识别成功",
					failure: (matchedValues) => {
					  // 只处理 valuesToCheck 中的值
					  const messages = matchedValues
						.filter(value => errorMessages[value]) // 确保只处理有定义的值
						.map(value => errorMessages[value]);
					  return `（包含以下异常：\n${messages.join("\n")})`;
					}
				  };
				  
				  // 判断 res.data 是否包含 6000
				  const has6000 = res.data.includes(6000);
				  
				  // 如果没有 6000 但包含其他值，直接提示“打分异常”
				  if (!has6000 && res.data.length > 0) {
					this.$message.error("打分异常"); // 直接提示打分异常
				  } else if (has6000) {
					// 如果有 6000，显示匹配的异常信息
					const matchedValues = res.data.filter(value => Object.keys(errorMessages).includes(String(value)));
					if (matchedValues.length > 0) {
					  this.$message({
						type: 'error',
						message: '打分异常',
						offset:60
					  });
					} else {
					   this.$message({
						 type: 'success',
						 message: statusCodes.success,
						 offset:60
					   });
					}
				  } else {
					this.$message({
					  type: 'success',
					  message: statusCodes.success,
					  offset:60
					});
				  }
			  }else{
				  this.loadingishow.close();
				  this.$message({
					type: 'success',
					message: res.message,
					offset:60
				  });
			  }
		  })
	  },
	  searchboxinfo(){
		  this.selectycbox()
	  },
	  //批量删除
	  dacdeletmore(){
		  //console.info(this.multipleSelection.length)
		  if(this.multipleSelection.length>0){
			  let ids = this.multipleSelection.map(item => item.id)
			  this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				  }).then(() => {
					  post('/scanpaperexception/delexception',ids)
					  .then(res=>{
						  if(res.code==200){
							  this.$message({
								  type: 'success',
								  message: '删除成功!',
								  offset:60
							  });
							  this.selectycbox()
							  this.getdatanum()
						  }else{
							  this.$message({
								type: 'error',
								message: res.message,
								offset:60
							  });
						  }
					  })
					  .catch(error=>{
						  this.$message({
							type: 'error',
							message: res.message,
							offset:60
						  });
					  })
					
				  }).catch(() => {
					this.$message({
					  type: 'info',
					  message: '已取消删除',
					  offset:60
					});          
			  });
		  }else{
			  this.$message({
				type: 'warning',
				message:'请先选择要删除的内容',
				offset:60
			  });
		  }
	  }
	},
	components: {
	  draggable,
	},
	 beforeDestroy() {
		 // 清除定时器
		 clearTimeout(this.timer);
		 clearTimeout(this.timer1);
		 clearTimeout(this.timer2);
		 clearTimeout(this.timer3);
		 if (this.loadingishow) {
			 this.loadingishow.close();
		   }
	   },
	   beforeRouteLeave(to, from, next) {
		   // 清除定时器
		   clearTimeout(this.timer);
		   clearTimeout(this.timer1);
		   clearTimeout(this.timer2);
		   clearTimeout(this.timer3);
		   if (this.loadingishow) {
			 this.loadingishow.close(); // 路由离开时关闭 Loading
		   }
		   next();
		 },
  };
  </script>
  
  <style scoped>
  canvas {
	/* border: 1px solid #000; */
  }
  .header{
	box-sizing: border-box;
	  min-width:100%;
	  height:48px;
	  padding:0 24px;
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  color:#fff;
	  background:#2379F6;
	  font-size:16px;
  }
  .header h3{
	  font-weight: normal;
	  font-size:16px;
  }
  .header p{
	  display: flex;
  }
  .header p b{
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  width: 134px;
	  height: 32px;
	  background: rgba(255,255,255,0.1);
	  border-radius: 17px;
	  border: 1px solid #FFFFFF;
	  text-align: center;
	  line-height:32px;
	  cursor: pointer;
	  margin-right:14px;
  }
  .header p b img{
	  width:16px;
	  margin-right:8px;
  }
  .header p em{
	  display: inline-block;
	  width: 76px;
	  height: 32px;
	  background: #FFFFFF;
	  border-radius: 17px;
	  border: 1px solid #FFFFFF;
	  color:#2379F6;
	  text-align: center;
	  line-height:32px;
	  cursor:pointer
  }
  .tabNav{
	  min-width:100%;padding:0 40px;
	  height:54px;
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  padding:0 24px 0 10px;
	  background:#fff;
  }
  .tabNav ul{
	  display: flex;
	  align-items: center;
	  font-size:14px;
  }
  .tabNav ul li{
	  padding:0 20px;
	  cursor: pointer;
	  line-height:38px;
	  color:#557292;
	  position:relative
  }
  .tabNav ul li:hover,.tabNav ul li.hover{
	  color:#2A303B;
  }
  .tabNav ul li:hover::after,.tabNav ul li.hover::after{
	  content:'';
	  width: 24px;
	  height: 4px;
	  background: #295CFF;
	  border-radius: 2px;
	  position:absolute;
	  left:50%;
	  transform: translateX(-50%);
	  bottom:0
  }
  .tabNav span{
	  display: inline-block;
	  width: 140px;
	  height: 34px;
	  background: #F2F6FB;
	  border-radius: 10px;
	  border: 1px solid #295CFF;
	  font-weight: 500;
	  font-size: 14px;
	  color: #295CFF;
	  text-align: center;
	  line-height:34px;
	  cursor: pointer;
  }
  /* 上传 */
  .uploadMarks{
	  box-sizing: border-box;
	  background:#F4F7FD;
	  width:100vw;
	  height:calc(100vh - 49px);
	  position: relative;
  }
  .smcsbutton{
	  width: 124px;
	  height: 34px;
	  background: #2379F6;
	  border-radius: 10px;
	  font-size: 14px;
	  color: #FFFFFF;
	  text-align: center;
	  border:none;
	  /* margin:24px 0 0 24px; */
	  position: absolute;
	  padding:0;
	  left:24px;
	  top:24px;
  }
  .boxcenter{
	  display: flex;
	  justify-content: space-between;
  }
  .uploadcardInfo{
	  width:80%;
	  height:calc(100vh - 49px);
	  background:#fff;
	  position:relative;
	  box-shadow: 0 4px 16px 0 #5572921a;
	  overflow: auto;
	  position:relative;
  }
  .examboxbutton{
	  width:100%;
	  box-sizing: border-box;
	  display: flex;
	  align-items: center;
	  padding:0 15px;
	  height: 54px;
	  background: #E8F0FA;
	  position:absolute;
	  left:0;
	  bottom:0;
  }
  .examboxbutton >>>  .el-button{
	  width: 124px;
	  height: 34px;
	  border-radius:10px;
	  padding:0;
	  margin:0;
	  font-size:12px;
	  border: 1px solid #295CFF;
	  color:#295CFF;
	  background:none;
  }
  .examboxbutton >>>  .el-button:first-child{
	  background:#295CFF;
	  border: 1px solid #295CFF;
	  color:#fff;
  }
  .examboxbutton >>>  .el-button:nth-child(2){
	  margin:0 8px;
  }
  .examboxbutton1{
	  width:100%;
	  box-sizing: border-box;
	  display: flex;
	  align-items: center;
	  padding:0 15px;
	  height: 54px;
	  background: #E8F0FA;
	  position:absolute;
	  left:0;
	  bottom:0;
	  justify-content: center;
  }
  .examboxbutton1 >>>  .el-button{
	  width: 124px;
	  height: 34px;
	  border-radius:10px;
	  padding:0;
	  margin:0;
	  font-size:12px;
	  border: 1px solid #295CFF;
	  color:#295CFF;
	  background:none;
  }
  .examboxbutton1 >>>  .el-button:first-child{
	  background:#295CFF;
	  border: 1px solid #295CFF;
	  color:#fff;
  }
  .examboxbutton1 >>>  .el-button:nth-child(2){
	  margin:0 8px;
  }
  .qtbuttonset{
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  margin-top:14px;
  }
  .qtbuttonset em{
	  width: 124px;
	  height: 34px;
	  background: #295CFF;
	  border-radius: 10px;
	  font-size:14px;
	  color:#fff;
	  text-align: center;
	  line-height: 34px;
	  margin:8px;
  }
  .qtbuttonset em:last-child{
	  width: 124px;
	  height: 34px;
	  background: #F2F6FB;
	  border-radius: 10px;
	  border: 1px solid #295CFF;
	  color:#295CFF;
  }
  .uploadcardInfo h3{
	  line-height:67px;
	  border-bottom:solid 1px #D8E4F0;
	  padding:0 24px;
	  color:#2A303B;
	  font-weight:normal;
	  font-size:18px;
  }
  .uploaddiv{
	  display: flex;
	  flex-wrap: wrap;
	  justify-content: center;
  }
  .uploaddivattention{
	  font-size: 14px;
	  color: #B3B8C2;
  }
  .cropperBox{
	  height:calc(100vh - 49px);
	  display: flex;
  }
  .cropperImageset{
	  width:calc(100% - 562px);
	  height:calc(100vh - 49px);
	  overflow:auto;
	  position: relative
  }
  .routate{
		position:absolute;
		left:50px;
		top:5px;
		background:#fff;
		height:60px;
		display: flex;
		align-items: center;
		padding:0 10px 0 0;
		box-shadow: 0 0 5px rgba(0,0,0,0.1);
		border-radius:5px;
		font-size:14px;
		color:#557292;
		border-radius: 10px;
	  z-index:10
	}
   .routate >>> .el-select,.routate >>>.el-input{
		width:150px;
	}
   .routate >>> .el-select{
		margin-right:10px;
	}
	.routate >>>.el-input{
		margin-left:10px;
		margin-right:10px;
	}
   .routate >>> .el-button{
		border-radius:10px;
		height:35px;
		width:55px;
		padding:0 ;
	  margin-left:10px
	}
	.routate >>> .el-input__inner{
		border-radius:10px;
		height:35px;
	}
	.breadBox >>> .el-breadcrumb__inner a,.breadBox >>> .el-breadcrumb__inner.is-link{
		font-weight:normal
	}
	.breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner,
	.breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner a,
	.breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover,
	.breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner:hover{
		font-weight:bold
	}
	.routerlistbox{
		width: 224px;
		height: 30px;
		background: #295cff0f;
		border: 1px solid #FFFFFF;
		border-radius: 4px;
		display: flex;
		align-items: center
	}
	.routerlistbox a{
		flex:1;
		height:30px;
		line-height:30px;
		text-align: center;
		font-size:14px;
		color:#fff;
	}
	 .routerlistbox a.hover{
		 background:#fff;
		 color:#2379F6
	 }
	 .uploadcardInfo h3{
		 padding:0 24px;
		 display: flex;
		 justify-content: space-between;
		 font-size:18px;
		 color:#2A303B;
		 align-items: center;
		 border-bottom:solid 1px #D8E4F0
	 }
	 .uploadcardInfo h3 .el-button{
		 width: 124px;
		 height: 34px;
		 background: #295CFF;
		 border-radius: 10px;
		 font-size: 14px;
		 color: #FFFFFF;
		 line-height:34px;
		 padding:0;
		 border:none;
	 }
	 .uploadcardInfo ul{
		 margin-top:24px;
	 }
	  .uploadcardInfo ul li{
		  display: flex;
		  align-items: center;
		  border-top:solid 1px #D8E4F0;
		  border-left:solid  1px #D8E4F0;
		  height:40px;
	  }
	  .uploadcardInfo ul li span{
		  display:block;
		  border-bottom:solid 1px #D8E4F0;
		  border-right:solid  1px #D8E4F0;
		  height:40px;
		  width:80px;
		  text-align: center;
		  font-size:14px;
		  line-height:40px;
		  color:#2A303B;
	  }
	  .uploadcardInfo ul li span.hover{
		  background: #ec555a33;
		  border: 1px solid #EC555A;
		  cursor: pointer;
	  }
	  .answerbox {
		width:auto;
		height: 138px;
		background: #FFFFFF;
		box-shadow: 0 2px 6px 0 rgba(85,114,146,0.1);
		border-radius: 10px;
		padding: 0 20px;
		position: fixed;
		z-index: 1000; /* 确保弹框在最上层 */
	  }
	  .answerbox h4{
		  font-size:14px;
		  padding-top:14px;
	  }
	  .answerbox p{
		  display: flex;
		  padding-top:8px;
	  }
	  .answerbox p i{
		  width: 30px;
		  height: 34px;
		  background: #295cff1a;
		  border: 1px solid #295cff1a;
		  border-radius: 10px;
		  line-height:34px;
		  text-align: center;
		  font-size:14px;
		  color:#295CFF;
		  margin-right:10px;
		  font-style: normal;
		  cursor: pointer;
	  }
	  .answerbox div{
		  display: flex;
		  justify-content: right;
		  align-items: center;
		  margin-top:10px;
	  }
	  .answerbox div span{
		  display: inline-block;
		  width: 62px;
		  height: 34px;
		  border: 1px solid #295CFF;
		  border-radius: 10px;
		  font-size:14px;
		  color:#295CFF;
		  text-align: center;
		  line-height:34px;
		  margin-right:14px;
		  cursor: pointer;
	  }
	  .answerbox div b{
		  width: 76px !important;
		  height: 34px;
		  background: #295CFF !important;
		  border: 1px solid #295cff1a;
		  border-radius: 10px;
		  font-size:14px;
		  color:#fff !important;
		  text-align: center;
		  line-height:34px;
		  cursor: pointer;
	  }
	  .yclbtitle{
		  display: flex;
		  justify-content: space-between;
		  align-items: center;
		  padding:16px;
	  }
	  .yclbtitleLeft{
		  display: flex;
	  }
	  .yclbtitleRight{
		  display: flex;
	  }
	  .yclbtitleLeft >>> .el-input{
		  margin-right:15px;
	  }
	  .yclbtitleLeft >>> .el-input__inner{
		  width: 126px;
		  height: 34px;
		  border: 1px solid #D8E4F0;
		  border-radius: 10px;
		  color:#2A303B;
		  font-size:14px;
	  }
	  .yclbtitleLeft >>> .el-input__icon{
		  line-height:34px;
	  }
	  .yclbtitleLeft >>> .el-button{
		  width:80px;
		  height: 34px;
		  background: #295CFF;
		  border-radius: 10px;
		  border:none;
		  line-height:34px;
		  color:#fff;
		  padding:0 20px
	  }
	  .yclbtitleRight >>> .el-button{
		  width: 80px;
		  height: 34px;
		  background: #295CFF;
		  border-radius: 10px;
		  border:none;
		  line-height:34px;
		  color:#fff;
		  padding:0
	  }
	  .yclbtitleRight >>> .el-button:nth-child(2){
		  background:#EC555A;
	  }
	  .custom-table {
		width: 100%;
		border: 1px solid rgba(216,228,240,0.34);
		border-radius:10px;
		border-right: none;
		border-bottom:none;
	  }
	  
	  /* 自定义表格内部元素的样式 */
	  .custom-table >>> .el-table{
		  border-collapse: collapse; /* 关闭默认的边框合并模式 */
			border-spacing: 0 !important; /* 强制重置间距 */
	  }
	  .custom-table >>> .el-table__header-wrapper th {
		background-color: #E8F0FA;
		height:42px;
		padding:0;
		text-align: center;
		font-weight:normal
	  }
	  .custom-table >>> .el-table__row td {
		height:42px;
		padding:0;
		text-align: center;
		border-bottom:solid 1px rgba(216,228,240,0.34);
		border-right:solid 1px rgba(216,228,240,0.34);
		border-collapse: collapse; /* 关闭默认的边框合并模式 */
		  border-spacing: 0 !important; /* 强制重置间距 */
		  font-size:14px;
	  }
	  .custom-table >>> .el-table__row td b{
		  display:block;
		  height:36px;
		  width:97%;
		  text-align: center;
		  font-size:14px;
		  line-height:36px;
		  color:#2A303B;
	  }
	  .custom-table >>> .el-table__row td b.hover{
		  border: 1px solid #EC555A;
		  cursor: pointer;
	  }
	  .boxihover{
		  border: 1px solid #EC555A;
		  cursor: pointer;
	  }
	  .custom-table >>> .el-input{
		  height:35px;
	  }
	  .custom-table >>> .el-input__inner{
		  background:rgba(236,85,90,0.2); ;
		  padding:0;
		  text-align: center;
		  border:none;
		  height:36px;
		  width:101%
	  }
	  .el-table .warning-row {
		  background: #ffffff;
	   }
	  .el-table .success-row {
		  background: #D8E4F0;
	  }
	  .el-table .cell{
		  padding:0 !important;
	  }
	  .custom-table >>> .el-table__row td div.cell{
		  padding:0 !important;
	  }
	  .cardczpk{
			box-sizing: border-box;
			width: 174px;
			height: 90px;
			background: #FFFFFF;
			box-shadow: 0 4px 16px 0 #5572921a;
			border-radius: 10px;
			position:fixed;
			left:24px;
			top:72px;
			padding:14px;
	  }
	  .cardczpk span{
			font-size:14px;
			color:#2A303B;
	  }
	  .cardczpk div{
			display: flex;
			align-items: center;
	  }
	  .cardczpk div i,.cardczpk div b{
			box-sizing: border-box;
			font-style: normal;
			width: 66px;
			height: 34px;
			background: #295cff1a;
			border: 1px solid #295cff1a;
			border-radius: 10px;
			font-size:14px;
			color:#295CFF;
			line-height:34px;
			padding-left:10px;
			cursor: pointer;
			margin-top:5px;
	  }
	  .cardczpk div i{
			background:url(../../assets/image/school/roate.png) no-repeat 43px center;
			background-size:13px 14px
	  }
	  .cardczpk div b{
			margin-left:14px;
			background:url(../../assets/image/school/px.png) no-repeat 43px center;
			background-size:13px 14px
	  }
	  .pagesetfixed{
			 position:fixed;
			 left:25px;
			 bottom:25px;
			 display: flex;
			 align-items: center;
			 width:auto;
			 height: 43px;
			 border-radius: 5px;
			 background: #FFFFFF;
			 box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.3); 
			 padding-left:10px;
	  }
	  .pagesetfixed li{
			width: 25px;
			height: 25px;
			border-radius: 3px;
			opacity: 1;
			/* Brand 品牌/Brand1-Light */
			background: #F2F3FF;
			line-height:25px;
			font-size: 14px;
			color:#366EF4;
			text-align: center;
			margin-right:10px;
			cursor: pointer;
	  }
	  .pagesetfixed li.hover{
			 background:#366EF4;
			 color:#fff;
	  }
	  .uploadcadContent{
			 position:fixed;
			 width:100%;
			 height:100%;
			 background:rgba(0,0,0,0.7);
			 left:0;
			 top:0;
			 z-index: 10000;
		}
		.uploadcad{
			background: #FFFFFF;
			box-shadow: 0 4px 16px 0 #5572921a;
			border-radius: 10px;
			padding:25px 0 25px 25px;
			position:fixed;
			left:50%;
			top:50%;
			transform: translate(-50%,-50%);
			max-width:875px;
			max-height:500px;
		}
		.uploadcad ul{
			display: flex;
			align-items: center;
			flex-wrap: wrap;
		}
		.uploadcad ul li{
			width: 200px;
			height: 140px;
			background: #33333d;
			margin-right:25px;
			position:relative
		}
		.uploadcad ul li img{
			width:100%;
			border: 1px solid #295cff80;
		}
		.uploadcad ul li div{
			font-size:12px;
			text-align: center;
		}
		.uploadcad ul li div span{
			padding-top:12px;
			color:#295CFF;
			cursor:pointer;
		}
		.uploadcad h3{
			font-weight:normal;
			font-size:18px;
			margin-bottom:15px;
		}
		.uploadcad ul li p{
			width:100%;
			height:100%;
			position:absolute;
			left:0;
			top:0;
			background:rgba(0,0,0,0.3);
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.uploadcad ul li em{
			width: 52px;
			height: 24px;
			background: #ffffff;
			border-radius: 12px;
			font-size: 16px;
			color: #295CFF;
			text-align: justify;
			line-height:24px;
			text-align: center;
			font-style:normal;
			cursor: pointer;
		}
		.buttonreupload{
			margin-top:50px;
		}
		.buttonreupload button,.buttonreupload b{
			display: inline-block;
		   width: 124px;
		   height: 34px;
		   border-radius: 10px; 
		   border: 1px solid #295CFF;
		   text-align: center;
		   line-height:34px;
		   font-size:14px;
		   cursor: pointer;
		}
		.buttonreupload button{
			background: #295CFF;
			color:#fff;
			margin-right:24px;
		}
		.buttonreupload b{
			color:#295CFF;
			background: #F2F6FB;
		}
		.boxsetdelecte{
			position:relative;
		}
		.boxsetdelecte span{
			position:absolute;
			left:-24px;
			top:24px;
		}
		.buttonboxedit{
			  display: flex;
			  align-items: center;
			  justify-content: center;
			  padding-top:5px;
			width:200px;
			height:140px;
			background:rgba(0,0,0,0.5);
			position:absolute;
			left:-12px;
			top:35px;
		  }
		  .buttonboxedit i{
			  width: 52px;
			  height: 24px;
			  background: #fff;
			  border-radius: 12px;
			  font-size: 16px;
			  color: #295CFF;
			  text-align: justify;
			  line-height:24px;
			  text-align: center;
			  font-style:normal;
			  cursor: pointer;
		  }
		  .boxsetdelecte b{
			  display: block;
			  text-align: center;
			  font-size:20px;
			  padding-bottom:6px;
		  }
		.imgmove span{
			display: flex;
			align-items: center;
			margin:0 13px;
		}
		.imgmove span div{
			margin:0 13px;
		}
		.addExamMain{
			position: fixed;
			width:100%;
			height:100%;
			background:rgba(0,0,0,0.5);
			left:0;
			top:0;
			z-index:100;
		}
		.addExamContent{
			width: 584px;
			height: auto;
			background: #FFFFFF;
			box-shadow: 0px 4px 16px 0px rgba(85,114,146,0.1);
			border-radius: 10px;
			position: fixed;
			left:50%;
			top:50%;
			transform: translate(-50%,-50%);
			z-index:2;
			box-sizing: border-box;
			padding:30px;
		}
		.addExamContent h3{
			font-size:18px;
			padding-bottom:10px;
		}
		.addExamContent p{
				 color:red;
				 font-size:14px;
		}
		.sbcontentbsl{
				 display: flex;
				 align-items: center;
				 padding:20px 0;
				 color:#333;
				 font-size:14px;
		}
		.sbcontentbsl >>> .el-checkbox{
				 color:#333;
		}
		.sbcontentbsl span{
				 width:200px;
				 height:35px;
				 background: #F7F8FA;
				 border-radius:4px;
				 padding-left:15px;
				 font-size:14px;
				 color:#86909C;
				 line-height:35px;
				 margin-left:15px;
		}
		.sbjdprogreen{
				 font-size:14px;
		}
		.groupbutton{
			display: flex;
			align-items: center;
			padding-top:20px;
		}
		.groupbutton >>> .el-button{
			width: 124px;
			height: 34px;
			background: #295CFF;
			border-radius: 10px;
			font-size: 14px;
			color: #FFFFFF;
			padding:0;
		}
		.groupbutton >>> .el-button:last-child{
			background: #F2F6FB;
			border-radius: 10px;
			border: 1px solid #295CFF;
			color:#295CFF;
			margin-left:24px;
		}
  </style>